陣列操作介紹 (上篇)

介紹四種陣列運用:

1. map
2. filter
3. find
4. findlndex

1. map

1. 將原始陣列運算後，重新組合併回傳一個新的陣列。
2. 不會改變原始陣列。

const num = [1 , 2 , 7 , 10];
//newNum  數值型式
const newNum = num.map(function(item){
  return item*item;
})
console.log(newNum);
//newNum2  布林值型式
const newNum2 = num.map(function(item){
  return item > 5;
})
console.log(newNum2);  
//newNum3  物件型式
const newNum3 = num.map(function(item){
  let obj = {};
  obj.checkNum = item > 5;
  return obj;
})
console.log(newNum3);  
console.log(num)  //原始陣列

如圖所示回傳的新陣列裡面可以是數值、布林值、物件。但不會改變原陣列。

3. map 與 forEach 差異

const num = [1 , 2 , 7 , 10];
//newNum  數值型式
const newNum = num.map(function(item){
  // return item*item;
})
console.log(newNum);

const arr = [1 , 2 , 7 , 10];
//newNum  數值型式
const newArr = arr.forEach(function(item){
  // return item*item;
})
console.log(newArr);

如圖所示 map 會組成新陣列，而 forEach 不會重新組成新陣列

2. filter

1. 將原始陣列運篩選出符合條件的資料後，重新組合併回傳一個新的陣列。
2. 不會改變原始陣列。

const num = [1 , 2 , 7 , 10];
const newNum = num.filter(function(item){
  return item >=5;
})
console.log(newNum);

如圖所示選取需要的資料並重新組成陣列。

今天就到這結束了。